fix(many): fix "not a valid selector" exception when an option ID contains quotes#2000
Merged
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR applies CSS.escape to dynamic IDs used in querySelector calls to prevent “not a valid selector” exceptions when IDs contain special characters.
- Escape IDs passed into
querySelectoracross multiple components. - Add early-return guard for missing
idor container inscrollToOption. - Restructure overflow tab lookup to use escaped selectors.
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.tsx | Use CSS.escape on targetId in querySelector. |
| packages/ui-tabs/src/Tabs/index.tsx | Guard tab lookup and escape id when querying overflowed tabs. |
| packages/ui-select/src/Select/index.tsx | Add early return for missing values and escape id in scrollToOption. |
| packages/ui-drilldown/src/Drilldown/index.tsx | Escape targetId in popover content lookup. |
Comments suppressed due to low confidence (3)
packages/ui-top-nav-bar/src/TopNavBar/TopNavBarLayout/SmallViewportLayout/index.tsx:313
- There are no tests verifying that IDs with quotes or other special characters are escaped correctly. Add unit or integration tests to cover these edge cases and ensure no selector errors occur.
[id="${CSS.escape(targetId)}"]
packages/ui-drilldown/src/Drilldown/index.tsx:1519
- [nitpick] Ensure that
CSS.escapeis available in all target browsers or include a polyfill/fallback, as not all environments provide it natively.
querySelector(`#${CSS.escape(targetId)}`)
packages/ui-select/src/Select/index.tsx:295
- The closing brace for
scrollToOptionwas removed, leading to an unbalanced brace and syntax error. Add a matching}to properly close the method.
}
|
matyasf
force-pushed
the
fix_id_crash
branch
3 times, most recently
from
0c6bf45 to
c06b1c2
Compare
ToMESSKa
reviewed
Jun 3, 2025
…tains quotes The issue is that we are letting users choose any string as an ID, and the querySelector method only accepts CSS safe IDs. Luckily there is a built in method to escape stuff that it does not like Fixes INSTUI-4570
ToMESSKa
approved these changes
Jun 3, 2025
git-nandor
approved these changes
Jun 3, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The issue is that we are letting users choose any string as an ID, and the querySelector method only accepts CSS safe IDs. Luckily there is a built in method to escape stuff that it does not like
Fixes INSTUI-4570
To test: